<template>
	<view class="content">
	<view class="status"></view>
		<view class="select">
		 <view class="cu-bar search bg-white">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input  :adjust-position="false" type="text" placeholder="搜索图书"
				 confirm-type="search" @click="changeToSearch"  :value="inputValue" @input="getValue" @confirm="show"></input>
				<text v-show="searchType!=1"class="cuIcon-close" @click="close"></text>
			</view>
			<view class="action">
				<button class="cu-btn bg-green shadow-blur round" @click="show">搜索</button>
			</view>
		 </view>
		</view> 
				<!-- 头部 -->
		<block v-if="searchType==1">
		<view class="cu-card article" v-for="(book,index) in books" :key="index">
		 <view class="cu-card article" :class="isCard?'no-card':''" >
			<view class="cu-item shadow" >
				<view class="booksTitle">
					<view class="text-cut grid text-bold" >{{book.title}}</view>
				</view>
				<view class="content">
					<image :src="book.picture" mode="aspectFill"></image>
					<view class="desc">
						<view class="text-content" >{{book.briefContent}}</view>
						<view>
							<view class="cu-tag bg-red light sm round">{{book.auth}}</view>
						</view>
					</view>
					<button class="cu-btn round" @click="borrowThisBook(book.title)">借书</button>
				    </view>
			</view>
		 </view>
		</view>
		</block>
		
		
		<block v-else-if="searchType==2">
			<view class="search-result" v-if="showCheck">
				<view class="cu-card article" >
				 <view class="cu-card article" :class="isCard?'no-card':''" >
					<view class="cu-item shadow" >
						<view class="booksTitle">
							<view class="text-cut grid text-bold" >{{searchTitle}}</view>
						</view>
						<view class="content">
							<image :src="searchPicture" mode="aspectFill"></image>
							<view class="desc">
								<view class="text-content" >{{searchBriefContent}}</view>
								<view>
									<view class="cu-tag bg-red light sm round">{{searchAuth}}</view>
								</view>
							</view>
						</view>
					</view>
				 </view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {books} from '../../../common/file.js'



	export default {
		data() {
			return {
				books:[],
				searchType:1,
				inputValue:'',
				searchTitle:'' ,
				searchPicture:'' ,
				searchBriefContent: '',
				searchAuth: '',
				showCheck:false,
				borrowBook:0
			}
		},
		onLoad(){
			books().then((res)=>{
				this.books=res;
				console.log(res)
				}
			);
		},
		methods: {
			returnTo(e){
				uni.navigateBack({
					url:'../index/index'
				})
				
			},
			changeToSearch(){
				this.searchType=2
			},
			close(){
				this.inputValue=null
				this.searchType=1
				
			},
			  getValue(e){
			          this.inputValue=e.detail.value;
			},
			 show(){
			        var that=this;
			        uni.request({
			          url: 'http://rap2api.taobao.org/app/mock/286869/library/search',
			          method: 'GET',
			          data: {
			            searchValue:that.inputValue
			          },
			          success: res => {
			            that.searchTitle=res.data.title;
			            that.searchPicture=res.data.picture;
			            that.searchBriefContent=res.data.briefContent;
						that.searchAuth=res.data.auth;
						that.showCheck=true;
						
			          },
			          fail: () => {
			            uni.showToast({
			              title: '找不到您查找的内容',
			              icon: 'none'
			            });
			          },
			          complete: () => {}
			        });
			      },
		    borrowThisBook(e){
              uni.request({
              	url:'http://rap2api.taobao.org/app/mock/286869/library/borrow',
				method: 'GET',
				data: {
				  title:e
				},
				success :res=> {
					console.log(res.title)
				}
              })
			}
			}
		    
			
			
			
		}
	
</script>

<style>
 .return{
	 margin-left: 10px;
 }
 .booksTitle{
	 margin-bottom: 10px;
	 margin-left: 10px;
	 margin-top: 10px;
 }
</style>
